<template>
  <div class="">
    <div class="box">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">好友</router-link>
   
    </div>
    <div class="show">
      <router-view></router-view>
    </div>
  </div>
</template>
<script >
export default {
  data() {
    return {};
  },
  props: [],
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang='less' scoped>
.box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #acacac;
  display: flex;
  justify-content: space-around;
  a {
    width: 100%;
    display: inline-block;
    border-right: 1px solid #fff;
    text-decoration: none;
    color: #fff;
    font-size: 26px;
  }
  a:last-child {
    border: none;
  }
  .active{
    background-color: rgb(53, 121, 200);
  }
}
</style>